<!doctype html>
<html>
<head>
<title>Wontube</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="description" content="Wontube"/>
<meta name="keywords" content="Wontube,Video,Music"/>
<#include "/include/css.html">
<#include "/admin/include/css.html">
<style type="text/css">
.updateDiv {
 z-index:1;
 width:500px;
}
</style>
</head>
<body>

<#include "/macro/utils.ftl">
<div id="page">
	 <#include "/admin/include/header.ftl">	
	<div id="navigation-container">
				<div class="navigation-wrap">
					
				</div>
	 </div>
	 			
    <div class="content-wrap tools">
    	<h1>Recommended Apps</h1>
    	
    	<div id="addDiv" class="updateDiv">
			<form action="${contextPath}/admin/toolsetting/add"  method="post" id="addForm">
				<input id="id" name="id"  type="hidden" value="" size="40"/>
				<p>tool_type:</p><input id="tool_type" name="tool_type"  type="text" size="150"/>
				<p>title:</p><input id="title" name="title"  type="text" size="150"/>
				<p>link:</p><input id="link" name="link"  type="text" size="150"/>
				<p>thumbnail:</p><input id="thumbnail" name="thumbnail"  type="text" size="150"/>
				<p>sort_index:</p><input id="sort_index" name="sort_index" type="text" size="150"/>
				<p>descripiton:</p><input id="descripiton" name="descripiton" type="text" size="150" />
				<p><input  type="submit" value="submit"/><input  type="reset" value="reset"/><p/>
			</form>
		</div>
        <div class="hr"></div>
    	<div class="recommended-apps-container">
        	<div class="recommended-apps-block">
                <div class="recommended-apps-container-title">Web Service</div>
                <ul>
                	<#if websiteItems??>
                		<#assign items = websiteItems.items>
	                	<#list items?chunk(2) as item_chunk><ul>          						
							<#list item_chunk as item>
								<#assign thumbnail = item.thumbnail!''>
								<#assign title = item.title!''>
									<#if (item_index + 1) % 2 == 0>
										<li class="no-margin-right">
									<#else>
										<li >
									</#if>   
										<div class="feature-tools-img"><img src="${thumbnail}" height="80" width="90"  onclick="updateWebsite('${item.id}');" /></div>
									 	<p onclick="updateWebsite('${item.id}');">${title}</p>
					                    </li>
							</#list>
						</#list>		
                    </#if>
                    <li class="no-margin-right recommended-apps-container">
                    <a href="javascript:"><span style="cursor:pointer" id="span1">Add...</span></a>
                    </li>
                    <div class="clear-float"></div>
                </ul>
            </div>
            
            <div class="recommended-apps-block">
                <div class="recommended-apps-container-title">PC Application</div>
                <ul>
                    <#if pcItems??>
                		<#assign items = pcItems.items>
	                	<#list items?chunk(2) as item_chunk><ul>          						
							<#list item_chunk as item>
								<#assign thumbnail = item.thumbnail!''>
								<#assign title = item.title!''>
									<#if (item_index + 1) % 2 == 0>
										<li class="no-margin-right">
									<#else>
										<li >
									</#if>   
										<div class="feature-tools-img"><img src="${thumbnail}" height="80" width="90" onclick="updateWebsite('${item.id}');" /></div>
									 	<p onclick="updateWebsite('${item.id}');">${title}</p>
					                    </li>
							</#list>
						</#list>		
                    </#if>
                    <li class="no-margin-right recommended-apps-container">
                    <a href="javascript:"><span style="cursor:pointer" id="pcspan">Add...</span></a>
                    </li>
                    <div class="clear-float"></div>
                </ul>
            </div>
            
            <div class="recommended-apps-block no-margin-right">
                <div class="recommended-apps-container-title">Mobile App</div>
                <ul>
                   <#if mobileItems??>
                		<#assign items = mobileItems.items>
	                	<#list items?chunk(2) as item_chunk><ul>          						
							<#list item_chunk as item>
								<#assign thumbnail = item.thumbnail!''>
								<#assign title = item.title!''>
									<#if (item_index + 1) % 2 == 0>
										<li class="no-margin-right">
									<#else>
										<li >
									</#if>   
										<div class="feature-tools-img"><img src="${thumbnail}" height="80" width="90" onclick="updateWebsite('${item.id}');" /></div>
									 	<p onclick="updateWebsite('${item.id}');">${title}</p>
					                    </li>
							</#list>
						</#list>		
                    </#if>
                    <li class="no-margin-right recommended-apps-container">
                    <a href="javascript:"><span style="cursor:pointer" id="mobilespan">Add...</span></a>
                    </li>
                    <div class="clear-float"></div>
                </ul>
            </div>
            
            <div class="clear-float"></div>

        </div>
        
        <div class="hr"></div>
        
    	</div>            
	</div>
	
	
</body>
</html>
<#include "/include/js.html">
    <script type="text/javascript">
        $(function(){
            $("#span1").click(function(){
                 $("#tool_type").val('Website');
                 clearInput();
            });
            $("#pcspan").click(function(){
                 $("#tool_type").val('Pc');
                 clearInput();
            });
            $("#mobilespan").click(function(){
                 $("#tool_type").val('Mobile');
                 clearInput();
            });
            
        });
        
        function updateWebsite(id){
           $.ajax({
			  type: "POST",
			  url:"${contextPath}/admin/toolsetting/"+id,
			  cache: false,
			  success: function(html){
			  	$("#addDiv").html(html);
			  }
			});
        }
        
        function deleteTool(id){
			 var url="${contextPath}/admin/toolsetting/delete/"+id;
			 window.location.href=url;
        }
        
        function showPic(obj){
        	var picName=$(obj).html();
        	var toolDetailId=$(obj).parent().prev().val();
        	$("#toolDetailId").val(toolDetailId);
        	$("#picName").text(picName);
        }
        
        function editerToolPic(id){
         $.ajax({
			  type: "GET",
			  url:"${contextPath}/admin/toolsetting/editpic/"+id,
			  cache: false,
			  success: function(html){
			  	$("#addDiv").html(html);
			  }
			});
        }
        
        function clearInput(){
        	 $("#link").val('');
             $("#id").val('');
             $("#thumbnail").val('');
             $("#sort_index").val('');
             $("#descripiton").val('');
             $("#title").val('');
             $("#delete").attr("disabled","disabled");
        }
        
      
    </script>